<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-table-template</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <style>
        [v-cloak] {
            visibility: hidden;
        }
        .list-group {
            margin-top: 2em;
        }
        .list-nothing {
            margin-top: 2em;
        }
    </style>
</head>
<body>

<div id="app" v-cloak style="width: 500px; margin: 0 auto">
    <form>
        <v-input v-model="username"></v-input>
        <v-textarea v-model="message" ref="message"></v-textarea>
        <button class="btn btn-default" @click.prevent="handleSend">发布</button>
    </form>
    <list :list="list" @reply="handleReply" @delete="deleteReply"></list>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
    Vue.component('vInput', {
        props: {
            value: {
                type: [String, Number],
                default: ''
            }
        },
        template: `
            <div class="form-group">
                <label for="nickname">昵称：</label>
                <input id="nickname" class="form-control" type="text" placeholder="请输入昵称"
                    :value="value" @input="updateValue">
            </div>
        `,
        methods: {
            updateValue(event) {
                this.$emit('input', event.target.value);
            }
        }
    });
    Vue.component('vTextarea', {
        props: {
            value: {
                type: [String, Number],
                default: ''
            }
        },
        template: `
            <div class="form-group">
                <label for="message">留言内容：</label>
                <textarea id="message" class="form-control" placeholder="请输入留言内容"
                    @input="updateValue" :value="value" ref="message"></textarea>
            </div>
        `,
        methods: {
            focus() {
                this.$refs.message.focus();
            },
            updateValue(event) {
                this.$emit('input', event.target.value);
            }
        }
    });
    Vue.component('list', {
        props: {
            list: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        template: `
            <ul v-if="list.length !== 0" class="list-group">
                <li v-for="(msg, index) in list" class="list-group-item">
                    <span class="label label-default">{{ msg.name }}</span>
                    <span class="list-msg">
                        <span>{{ msg.message }}</span>
                        <a class="list-reply" @click="handleReply(index)">回复</a>
                        <button @click="deleteComment(index)" type="button" class="close" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </span>
                </li>
            </ul>
            <div v-else class="list-nothing">留言列表为空</div>
        `,
        methods: {
            handleReply(index) {
                this.$emit('reply', index);
            },
            deleteComment(index) {
                this.$emit('delete', index);
            }
        }
    });

    let app = new Vue({
        el: '#app',
        data: {
            username: '',
            message: '',
            list: []
        },
        methods: {
            handleSend() {
                if (this.username === '') {
                    alert('请输入昵称');
                    return;
                }
                if (this.message === '') {
                    alert('请输入留言内容');
                    return;
                }
                this.list.push({
                    name: this.username,
                    message: this.message
                });
                this.message = '';
            },
            handleReply(index) {
                let name = this.list[index].name;
                this.message = '回复@' + name + '：';
                this.$refs.message.focus();
            },
            deleteReply(index) {
                this.list.splice(index, 1);
            }
        }
    });
</script>
</body>
</html>